<template>
    <!-- 参赛选手管理 -->
    <!-- 按钮 -->
    <el-row class="el_row_btn">
      <el-col :span="24" class="content">
        <div class="content_top_btn">
          <div></div>
          <div>
            <el-space>
              <el-input
                class="top_search_inp"
                v-model="query_data.studentName"
                clearable
                placeholder="搜素：学员姓名"
              />
              <el-input
                class="top_search_inp"
                v-model="query_data.phone"
                clearable
                placeholder="搜素：手机号码"
              />
              <el-button
                size="large"
                :icon="Search"
                circle
                :loading="loading"
                @click="
                  () => {
                    handleLoad(true);
                  }
                "
              />
              <!-- <el-button
                size="large"
                :icon="Delete"
                circle
                @click="handleRest"
              /> -->
            </el-space>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 内容 -->
    <el-table
      :data="data"
      border
      style="width: 100%"
      v-loading="loading"
      empty-text="暂无参赛选手"
    >
      <el-table-column label="学生ID" prop="studentId" width="80" />
      <el-table-column label="姓名" prop="studentName" width="100">
      </el-table-column>
      <el-table-column label="手机号码" prop="phone" width="120" />
      <el-table-column label="性别" prop="gender" width="72">
        <template #default="scope">
          <el-tag v-if="scope.row.gender == 0" type="danger">女</el-tag>
          <el-tag v-if="scope.row.gender == 1" type="primary">男</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="证件照" prop="documentImg">
        <template #default="scope">
          <el-popover placement="right">
            <template #reference>
              <el-icon size="20" style="cursor: pointer">
                <View />
              </el-icon>
            </template>
            <ImageComponent :src="scope.row.documentImg" />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="学校" prop="schoolName" />
      <el-table-column label="奖项" prop="awards" />
      <el-table-column label="城市赛积分" prop="cityIntegral" />
      <el-table-column label="锦标赛积分" prop="championship" />
      <el-table-column label="分数" prop="score" />
      <el-table-column label="创建时间" prop="createTime" width="180" />
      <el-table-column label="操作" prop="Address" width="100">
        <template #default="scope">
          <el-dropdown
            trigger="click"
            @command="(value) => handleOperate(value, scope.row)"
          >
            <span class="el_dropdown_link">
              操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="edit-info"
                  ><el-icon> <EditPen /> </el-icon>编辑信息</el-dropdown-item
                >
                <el-dropdown-item command="remove-item">
                  <el-icon> <CircleClose /> </el-icon>删除人员
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        layout="prev, pager, next, total"
        :total="total"
        @current-change="handlePage"
      />
    </div>
    <!-- 编辑信息 -->
    <el-dialog
      v-model="info_modal"
      title="编辑信息"
      class="info-modal"
      width="960px"
    >
      <InfoForm
        ref="InfoModal"
        @sub="
          info_modal = false;
          handleLoad(true);
        "
      />
    </el-dialog>
  </template>
  
  <script  setup>
  // 导入API函数、组件和其他依赖
  import { GetInformationApi, DeleteStudentApi } from "@/api/manage/institution";
  // 导入Vue的生命周期钩子和响应式API
  import { onMounted, ref, nextTick } from "vue";
  // 导入自定义钩子
  import { usePage } from "@/hooks/usePage";
  // 导入子组件
  import InfoForm from "./components/stu-info-form.vue";
  // 导入Element Plus的弹窗和消息提示组件
  import { ElMessageBox, ElMessage } from "element-plus";
  // 导入图片预览组件
  import ImageComponent from "@/components/image-component/index.vue";
  // 导入Element Plus的图标
  import { Delete, Search, View } from "@element-plus/icons-vue";
  // 导入Vuex的用户状态管理store
  import { useUserStore } from "@/store/user";
  
  // 使用Vuex的用户状态管理store
  const userStore = useUserStore();
  
  // 使用自定义数据钩子获取和管理参赛选手数据
  const { total, data, loading, query_data, handleLoad, handlePage } = usePage({
    api_fn: GetInformationApi,
    q_data: {
      studentName: "",
      phone: "",
    },
  });
  /**
   * 信息弹窗数据
   */
  const info_modal = ref(false);
  const InfoModal = ref();
  /**
   * 重置
   */
  const handleRest = () => {
    query_data.value.phone = "";
    query_data.value.studentName = "";
    handleLoad(true);
  };
  
  /**
   * 处理操作按钮点击事件的函数，包括编辑信息和删除人员
   */
  const handleOperate = (command, row) => {
    if (command == "edit-info") {
      if (userStore.info_data.auditStatus != 1) {
        ElMessage.error("审核中或审核未通过，暂不支持使用功能");
        return;
      }
      // 更新
      info_modal.value = true;
      nextTick(() => {
        InfoModal.value.handleGetInfo(row);
      });
    } else if (command == "remove-item") {
      if (userStore.info_data.auditStatus != 1) {
        ElMessage.error("审核中或审核未通过，暂不支持使用功能");
        return;
      }
      // 删除
      ElMessageBox.confirm("是否删除该选手", "提示", {
        "cancel-button-text": "取消",
        "confirm-button-text": "确定",
      }).then(async () => {
        let res = await DeleteStudentApi({
          studentId: row.studentId,
        });
        if (!res.success) {
          ElMessage.error(res.message);
        } else {
          ElMessage.success(res.message);
        }
        handleLoad(true);
      });
    }
  };
  // 将handleLoad函数暴露给组件外部
  defineExpose({
    handleLoad,
  });
  
  onMounted(() => {
    handleLoad(true);
  });
  </script>
  
  <style lang="scss" scoped>
  .header_information {
    .header_name {
      margin-left: 10px;
      margin-right: 10px;
      .header_text {
        margin-left: -10px;
        margin-right: -10px;
      }
      h1 {
        font-size: 28px;
      }
  
      // 线
      .header_line {
        display: block;
        height: 1px;
        width: 100%;
        margin: 24px 0 20px 0;
        background-color: #8473f717;
      }
    }
    //   内容
    :deep(.table_btn_success) {
      padding: 0 5px !important;
      border: none;
    }
    :deep(.el-table) .cell {
      padding: 0 10px;
    }
    .el_row_btn {
      margin-bottom: 20px;
  
      .content {
        .content_top_btn {
          display: flex;
          justify-content: space-between;
          :deep(.tob_tabs) {
            span {
              font-size: 14px !important;
            }
          }
          .top_search_inp {
            width: 300px;
            height: 40px;
            margin-right: 5px;
          }
          .top_search_btn {
            width: 110px;
            margin-right: 5px;
          }
        }
      }
    }
    .el_dropdown_link {
      font-size: 14px;
    }
    :deep(.el-table)__cell {
      padding: 12px 0 !important;
    }
  }
  .pagination-container {
    display: flex;
    justify-content: center;
    padding: 32px 0;
  }
  </style>